<template>
  <view style="flex: 1; height: 100%" class="u-flex u-flex-y-center">
    <view class="openbtn" v-if="btnfalg" @click="show = true">
      {{ showvalue }}
    </view>
    <view v-else style="width: 100%; font-size: 28rpx" @click="show = true">
      {{ showvalue }}
    </view>
    <u-datetime-picker
      :show="show"
      v-model="inputValue"
      mode="date"
      @confirm="show = false"
      @cancel="show = false"
    ></u-datetime-picker>
  </view>
</template>

<script>
export default {
  name: "selectzitem",
  props: {
    value: {
      typeof: [String, Number],
      default: "",
    },
    options: {
      typeof: Array,
      default: () => {
        return [];
      },
    },
    btnfalg: {
      typeof: Boolean,
      default: false,
    },
  },
  data() {
    return {
      show: false,
    };
  },
  computed: {
    showvalue() {
      if (!this.value || this.value == "0") {
        return "请选择";
      }
      return this.value;
    },
    inputValue: {
      get() {
        console.log(this.value);
        return this.value || new Date().getTime();
      },
      set(val) {
        this.$emit("input", this.$u.timeFormat(new Date(Number(val))));
        this.$emit("change");
      },
    },
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.openbtn {
  display: flex;
  // justify-content: center;

  align-items: center;
  // height: 100%;
  border: 1px solid #e5e5e5;
  position: relative;
  height: 72rpx;
  padding: 0 20rpx;
  border-radius: 10rpx;
  width: 100%;
  .iconclear {
    position: absolute;
    right: 10rpx;
  }
}
</style>
